<template>
  <div class="cost-summary">
    <ProTable ref="order_bill_table_ref" :immediate="true" :pagination="true" :search-form="formList" :columns="columns"
              :request="queryBillPage" :onRequestSuccess="requestSuccessCallback">
    </ProTable>
  </div>
</template>

<script>
import ProTable from '@/components/ProTable';
import {queryBillPage} from '@/api/order';
import Loading from "@/components/Loading";
import util from '@/utils/util'
import Authc from "@/components/Authc";
import {getDateRangeDate} from '@/utils/date'
import {omit} from "lodash";

export default {
  name: 'OrderBillTableRef',
  components: {
    ProTable,
    Authc,
    Loading
  },
  data() {
    return {
      title: '账单管理',
      exportSection: [],
      selectExportSectionItem: {},

      formList: [
        {
          type: 'input',
          name: 'orderId',
          label: '主订单号',
        },
        {
          type: 'input',
          name: 'organizationCode',
          label: '机构编码',
        },
        {
          type: 'input',
          name: 'merchantQuery',
          label: '商户编码/商户名称',
        },
        {
          type: 'input',
          name: 'merchantQuery',
          label: '商户编码/商户名称',
        },
        {
          type: 'select',
          name: 'settleStatus',
          label: '账单状态',
          props: {
            placeholder: '请选择',
            optionList: [
              {
                value: 'WAIT',
                label: '待清分'
              },
              {
                value: 'SUCCESS',
                label: '已清分'
              },
              {
                value: 'FAIL',
                label: '失败'
              }
            ],
            clearable: true
          }
        },
        {
          type: 'range',
          name: 'date',
          label: '账单时间',
          value: '',
          props: {
            placeholder: '请选择',
            format: 'yyyy年MM月dd日'
          }
        }
      ],
      columns: [
        {
          title: '主订单号',
          key: 'orderId',
          align: 'center',
          minWidth: 150,
        },
        {
          title: '商户名称',
          key: 'merchantName',
          align: 'center',
          minWidth: 180,
        },
        {
          title: '商户编码',
          key: 'merchantCode',
          align: 'center',
          minWidth: 150,
        },
        {
          title: '生成时间',
          key: 'createdDt',
          align: 'center',
          width: 100,
        },
        {
          title: '订单总价',
          key: 'totalAmount',
          align: 'center',
          minWidth: 80,
          render: (h, params) => {
            const amount = params.row.totalAmount || 0
            let item = amount / 100;
            return h('span', util.toMoney(item));
          }
        },
        {
          title: '实付总价',
          key: 'payAmount',
          align: 'center',
          minWidth: 80,
          render: (h, params) => {
            const amount = params.row.payAmount || 0
            let item = amount / 100;
            return h('span', util.toMoney(item));
          }
        },
        {
          title: '总退款金额',
          key: 'refundTotalAmount',
          align: 'center',
          minWidth: 80,
          render: (h, params) => {
            const amount = params.row.refundTotalAmount || 0
            let item = amount / 100;
            return h('span', util.toMoney(item));
          }
        },
        {
          title: '实退金额',
          key: 'refundAmount',
          align: 'center',
          minWidth: 80,
          render: (h, params) => {
            const amount = params.row.refundAmount || 0
            let item = amount / 100;
            return h('span', util.toMoney(item));
          }
        },
        {
          title: '清分金额',
          key: 'settleAmount',
          align: 'center',
          minWidth: 80,
          render: (h, params) => {
            const amount = params.row.settleAmount || 0
            let item = amount / 100;
            return h('span', util.toMoney(item));
          }
        },
        {
          title: '抽佣比例',
          key: 'platformPercent',
          align: 'center',
          minWidth: 40,
        },
        {
          title: '佣金金额',
          key: 'platformAmount',
          align: 'center',
          minWidth: 80,
          render: (h, params) => {
            const amount = params.row.platformAmount || 0
            let item = amount / 100;
            return h('span', util.toMoney(item));
          }
        },
        {
          title: '商户金额',
          key: 'merchantAmount',
          align: 'center',
          minWidth: 80,
          render: (h, params) => {
            const amount = params.row.merchantAmount || 0
            let item = amount / 100;
            return h('span', util.toMoney(item));
          }
        },
        {
          title: '核销状态',
          key: 'verificationStatus',
          align: 'center',
          minWidth: 80,
          render: (h, params) => {
            let text = ""
            let color = 'blue'
            if (!params.row.verificationStatus || params.row.verificationStatus == 'WAIT') {
              text = "待核销"
            } else if (params.row.verificationStatus == 'SC') {
              text = "核销成功"
              color = 'green'
            } else if (params.row.verificationStatus == 'FL') {
              text = "核销失败"
              color = 'red'
            }
            return h('div', [
              h('Tag', {
                props: {
                  color: color
                },
              }, text),
            ])
          }
        },
        {
          title: '清分状态',
          key: 'settleStatus',
          align: 'center',
          minWidth: 80,
          render: (h, params) => {
            let text = ""
            let color = 'blue'
            if (!params.row.settleStatus || params.row.settleStatus == 'WAIT') {
              text = "待清分"
            } else if (params.row.settleStatus == 'SUCCESS') {
              text = "已清分"
              color = 'green'
            } else if (params.row.settleStatus == 'FAIL') {
              text = "清分失败"
              color = 'red'
            }
            return h('div', [
              h('Tag', {
                props: {
                  color: color
                },
              }, text),
            ])
          }
        },
        {
          title: '应清日期',
          key: 'settleDate',
          align: 'center',
          minWidth: 80,
        },
        {
          title: '清分完成日期',
          key: 'settleScDate',
          align: 'center',
          minWidth: 80,
        },
      ]
    };
  },
  created() {
  },
  methods: {
    queryBillPage,
    beforeSearchSubmit(data) {
      return omit(data, this.searchDateHandler(data))
    },
    searchDateHandler(data) {
      const {date} = data

      const [startDate, endDate] = getDateRangeDate(date)
      if (startDate) {
        data.billDateBegin = util.formatDate(startDate)
      }
      if (endDate) {
        data.billDateEnd = util.formatDate(endDate)
      }
      return data
    },
    async selectExportSection(item) {
      this.selectExportSectionItem = item
    },
    //查询成功回调
    async requestSuccessCallback(res) {
      if (res && res.data.pagination) {
        const total = res.data.pagination.total || 0
        if (total) {
          const sections = Math.ceil(total / 5000)
          let newExportSection = []
          for (let i = 1; i <= sections; i++) {
            newExportSection.push({
              id: i,
              start: (i - 1) * 5000 === 0 ? 1 : (i - 1) * 5000,
              end: i * 5000
            })
          }
          console.log(this.exportSection)
          this.exportSection = newExportSection
        } else {
          this.exportSection = []
        }
      } else {
        this.exportSection = []
      }
    },
  }
};
</script>

<style>
.selectSectionItem {
  color: #2b85e4;
}
</style>
